<template>
  <div>
    <el-table
      :data="tableData"
      :size="tableSize"
      :height="tableHeight"
      highlight-current-row
      @expand-change="expandChange"
    >
      <el-table-column type="index" width="40">
      </el-table-column>
      <el-table-column width="80px" label="事件状态">
        <template slot-scope="scope">
          <el-tag :type="statusType(scope.row.peStatus)" @click="showView(scope.row)">{{statusTypeName(scope.row.peStatus)}}</el-tag>
        </template>
      </el-table-column>
      <!-- 展示切换的组件 v-if="scope.row.show" popper-class="popverClass" -->
      <el-table-column width="40">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="showPOP(scope.row)">
            {{scope.row.flag===true?'&lt;&lt;':'&gt;&gt;'}}
          </el-button>
          <el-popover :class="myPop" :popper-class="popverClass" :key="scope.row.peCod" :id="scope.row.peCode"
            :ref="scope.row.peCode" placement="right-start" trigger="click" :visible-arrow="false">
            <process :key="scope.row.peId" :ref='scope.row.peCode + scope.row.peId' :row="scope.row" />
          </el-popover>
        </template>
      </el-table-column>
<!--      <el-table-column prop="peCode" label="编号" width="110px"></el-table-column>-->
      <el-table-column prop="record" label="发现时间" width="100px"></el-table-column>
      <el-table-column prop="projectName" label="项目" width="90px"></el-table-column>
      <el-table-column prop="lv1ModuleName" label="模块" width="90px"></el-table-column>
      <el-table-column prop="lv2ModuleName" label="子模块" width="130px" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="开发负责人" width="100px" v-if="role!=='developer'&&role!=='tester' ">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showChangeDevPerson(scope.row)">{{scope.row.devPersonName}}</el-button>
          <el-popover
            :key="scope.row.peCode + 100"
            :id="scope.row.peCode + 100"
            placement="right-start"
            trigger="click"
            v-model="scope.row.showDevPerson"
          >
            <el-select size="mini" style="width: 150px" v-model="form.devPerson" placeholder="请选择" >
              <el-option v-for="item in form.devPersonList" :key="item.userId" :label="item.userName" :value="item.userId"/>
            </el-select>
            <div >
              <el-button size="mini" type="primary" style="margin-top: 5px;" @click="changeDevPerson(scope.row)" >确认</el-button>
              <el-button size="mini" type="info" style="margin-top: 5px;" @click="closeChangePop(scope.row.peCode)">取消</el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="devPersonName" label="开发负责人" width="100px" v-if="role==='developer'||role==='tester'"></el-table-column>
      <el-table-column label="测试负责人" width="100px" v-if="role!=='developer' ">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showChangeTestPerson(scope.row)">{{scope.row.testPersonName}}</el-button>
          <el-popover
            :key="scope.row.peCode + 101"
            :id="scope.row.peCode + 101"
            placement="right-start"
            trigger="click"
            v-model="scope.row.showTestPerson"
          >
            <el-select size="mini" style="width: 150px" v-model="form.testPerson" placeholder="请选择" >
              <el-option v-for="item in form.testPersonList" :key="item.userId" :label="item.userName" :value="item.userId"/>
            </el-select>
            <div >
              <el-button size="mini" type="primary" style="margin-top: 5px;" @click="changeTestPerson(scope.row)" >确认</el-button>
              <el-button size="mini" type="info" style="margin-top: 5px;" @click="closeTestChangePop(scope.row.peCode)">取消</el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="测试负责人" width="100px" v-if="role==='developer'" prop="testPersonName"/>
      <el-table-column prop="describe" label="事件描述" width="280px" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="开发进度" width="120px">
        <template slot-scope="scope">
          <el-tag :type="devStatusType(scope.row.devStatus)">{{devStatusTypeName(scope.row.devStatus)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="preRepair" label="预计修复完成时间" width="140px"></el-table-column>
      <el-table-column prop="preOnline" label="计划上线时间" width="140px"></el-table-column>
      <el-table-column label="操作" width="135" fixed="right">
        <template slot-scope="scope">
          <el-button @click="showView(scope.row)" type="text" size="small" icon="el-icon-view"
            style="margin-top: -10px">查看</el-button>
          <el-button @click="handleEdit(scope.row)" type="text" size="small" style="margin-top: -10px" v-if="showEdit">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small" style="margin-top: -10px" v-if="showDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pageNum" :page-sizes="[10, 20, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        background :total="page.totalNum">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { remove, changeDevPerson, changeTestPerson } from '@/api/events'
import Process from './process'
import { mapGetters } from 'vuex'
import { findByGroup } from '@/api/user'
export default {
  computed: {
    ...mapGetters([
      'window_height'
    ])
  },
  props: ['role'],
  components: {
    Process
  },
  data() {
    return {
      showEdit: false,
      showDelete: false,
      myPop: 'myPop2',
      popverClass: 'popverClass2',
      tableSize: 'mini',
      tableHeight: 520,
      height: `${document.documentElement.clientHeight}`,
      loading: false,
      showTran: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        totalNum: 0,
        totalPage: 0
      },
      form: {
        devPerson: '',
        testPerson: '',
        devPersonList: [],
        testPersonList: [],
        userList: []
      },
      tableData: []
    }
  },
  created() {
    this.tableHeight = this.window_height - 107
    // this.height > 900 ? this.tableHeight = 830 : 520
    this.height > 900 ? this.tableSize = 'medium' : 'mini'
    this.height > 900 ? this.myPop = 'myPop1' : 'myPop2'
    this.height > 900 ? this.popverClass = 'popverClass1' : 'popverClass2'
    this.showEdit = this.role === 'admin' || this.role === 'leader' || this.role === 'analyst' || this.role === 'tester'
    this.showDelete = this.role === 'admin' || this.role === 'manager' || this.role === 'analyst'
  },
  methods: {
    selectData(groupId) {
      findByGroup(groupId).then(response => {
        this.form.userList = response
        for (let i = 0; i < response.length; i++) {
          const element = response[i]
          if (element.role === 'tester') {
            this.form.testPersonList.push(element)
          } else {
            this.form.devPersonList.push(element)
          }
        }
      })
    },
    showChangeDevPerson(row) {
      this.form.devPerson = ''
      document.getElementById(row.peCode+100).children[0].style = "width: 175px; margin-left: 30px"
      document.getElementById(row.peCode+101).children[0].style = "display: none"
      let flag = !row.showDevPerson
      this.tableData.forEach(e => {
        if (e.peCode !== row.peCode) {
          e.showDevPerson = false
          document.getElementById(e.peCode+100).children[0].style = "display: none"
        } else {
          e.showDevPerson = flag
        }
      })
    },
    showChangeTestPerson(row) {
      this.form.testPerson = ''
      document.getElementById(row.peCode+101).children[0].style = "width: 175px; margin-left: 30px"
      document.getElementById(row.peCode+100).children[0].style = "display: none"
      let flag = !row.showTestPerson
      this.tableData.forEach(e => {
        if (e.peCode !== row.peCode) {
          e.showTestPerson = false
          document.getElementById(e.peCode+100).children[0].style = "display: none"
        } else {
          e.showTestPerson = flag
        }
      })
    },
    changeDevPerson(row) {
      this.closeChangePop(row.peCode)
      if (this.form.devPerson === '') {
        return
      }
      changeDevPerson(row.peId, this.form.devPerson).then(_ => {
        this.form.userList.forEach(u => {
          if (u.userId === this.form.devPerson) {
            row.devPersonName = u.userName
          }
        })
      })
    },
    changeTestPerson(row) {
      this.closeTestChangePop(row.peCode)
      if (this.form.testPerson === '') {
        return
      }
      changeTestPerson(row.peId, this.form.testPerson).then(_ => {
        this.form.userList.forEach(u => {
          if (u.userId === this.form.testPerson) {
            row.testPersonName = u.userName
          }
        })
      })
    },
    closeChangePop(peCode) {
      this.tableData.forEach(t => {
        if (t.peCode === peCode) {
          t.showDevPerson = false
        }
      })
      document.getElementById(peCode+100).children[0].style = "display: none"
    },
    closeTestChangePop(peCode) {
      this.tableData.forEach(t => {
        if (t.peCode === peCode) {
          t.showTestPerson = false
        }
      })
      document.getElementById(peCode+101).children[0].style = "display: none"
    },
    showColumn(row) {
      let flag = row.flag
      if (flag == null || flag === 0) {
        flag = 1
      } else {
        flag = 0
      }
      row.flag = flag
    },
    changeStatus(taskId, process, status) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].taskId === taskId) {
          this.tableData[i].status = status
          this.tableData[i].process = process
        }
      }
    },
    expandChange(row, rowList) {
      // this.showTran = true
      // console.log(row)
      // console.log(this.$refs)
      // console.log(rowList)
    },
    statusType(type) {
      switch (type) {
        case 0:
          return 'warning'
        case 1:
          return 'success'
        case 2:
          return 'info'
      }
    },
    devStatusType(type) {
      switch (type) {
        case 0:
          return 'info'
        case 1:
          return 'warning'
        case 2:
          return 'info'
        case 3:
          return 'warning'
        case 4:
          return 'success'
      }
    },
    statusTypeName(type) {
      switch (type) {
        case 0:
          return '待解决'
        case 1:
          return '已解决'
        case 2:
          return '关闭'
      }
    },
    devStatusTypeName(type) {
      switch (type) {
        case 0:
          return '待确认'
        case 1:
          return '已分配'
        case 2:
          return '代码已提交'
        case 3:
          return '测试中'
        case 4:
          return '已完成'
        case 5:
          return '关闭'
      }
    },
    getTableData(data) {
      this.tableData.forEach(e => {
        document.getElementById(e.peCode).children[0].style = "display: none"
      })
      this.$refs = {}
      this.tableData = data.content
      this.page.totalNum = data.totalNum
      this.page.totalPage = data.totalPage
      this.tableData.forEach(e => {
        e.flag = false
        e.tab = '&lt;&lt;'
        e.show = true
        e.showDevPerson = false
        e.showTestPerson = false
      })
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.$parent.$refs.search.handleClickSerach()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.$parent.$refs.search.handleClickSerach()
    },
    showView(row) {
      this.$parent.$refs.search.$refs.pop.readOnly(row)
    },
    handleEdit(row) {
      this.$parent.$refs.search.$refs.pop.editShowView(row)
    },
    handleDelete(row) {
      this.$confirm('是否删除此条生产数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.peId).then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$parent.$refs.search.handleClickSerach()
        })
      })
    },
    rowClass({
      row,
      rowIndex
    }) {
      return {
        "background-color": "rgba(255, 255, 255)"
      };
    },
    showPOP(row) {
      if (row.devStatus === 2 || row.devStatus === 3 || row.peStatus === 1) {
        return
      }
      let flag = !row.flag
      flag
        ?
        document.getElementById(row.peCode).children[0].style = "width: 370px; margin-left: 30px" :
        document.getElementById(row.peCode).children[0].style = "display: none"
      this.tableData.forEach(e => {
        if (e.peCode !== row.peCode) {
          e.flag = false
          document.getElementById(e.peCode).children[0].style = "display: none"
        } else {
          e.flag = flag
        }
      })
      this.$refs[row.peCode + row.peId].tranShow()
    },
  }
}
</script>

<style>
  /* .el-table__expanded-cell {
    padding-left:20px !important;
  }
  .tableClass .cell{
    padding: 0!important;
    height: 21.0px;
    line-height: 21.0px!important;
  }  */
  .el-table__body tr:hover>td {
    background-color: #ffffff !important;
  }

  .el-table__body tr.current-row>td {
    background-color: #F5F7FA !important;
  }

</style>

<style>
  .myPop1>.el-popover.popverClass1 {
    padding-top: 13px !important;
    padding-bottom: 12px !important;
    padding-left: 2px !important;
    border: 0 !important;
    background: #F5F7FA !important;
    -webkit-box-shadow: none !important;
    box-shadow: none;
    float: right;
    margin-top: -40px;
    margin-left: 20px;
  }

  .myPop2>.el-popover.popverClass2 {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    padding-left: 2px !important;
    border: 0 !important;
    background: #F5F7FA !important;
    -webkit-box-shadow: none !important;
    box-shadow: none;
    float: right;
    margin-top: -40px;
    margin-left: 20px;
  }

</style>
